<template>
  <div class="order-main">
    <div class="top">
      <div class="left">
        <span v-show="showTitle">{{ title }}</span>
      </div>
      <div class="right">
        <div class="date"><DatePicker /></div>
        <div class="search-box">
          <div class="input"><input placeholder="订单搜索" /></div>
          <Button class="button thumb" background="#3644bf">
            <div class="button-icon">
              <img :src="publicUrl(`/images/search-white.png`)" />
            </div>
          </Button>
        </div>
      </div>
    </div>

    <div class="dir"></div>

    <div class="box">
      <div
        :class="['part', activeName === index ? 'sel' : 'nosel', 'thumb']"
        @click="() => clickPart(index)"
        v-for="(item, index) in columnShow"
      >
        {{ item.title }}
      </div>
    </div>

    <div class="dh">
      <div
        class="dh-part thumb"
        v-for="(item, index) in navShow"
        @click="() => (columnShow[activeName].navIndex = index)"
      >
        {{ item.title }}
        <div
          class="sel-bottom"
          v-show="index === columnShow[activeName].navIndex"
        ></div>
      </div>
    </div>

    <div class="table">
      <Table :platformCustomer="platformCustomer" :orderData="orderData">
        <template #operation="{ row }">
          <slot name="operation" :row="row"></slot>
        </template>
      </Table>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, computed, watch } from "vue";
import DatePicker from "@/components/DatePicker/index.vue";
import Button from "@/components/Button/index.vue";
import { publicUrl } from "@/utils/util";
import Table from "./components/Table/index.vue";
import { Customer, OrderData, Column, Navigation } from "./interface";
import defaultData from "./default.json";
// const data = ref();
interface Props {
  platformCustomer?: Array<Customer>; //平台客服
  showTitle?: boolean; //显示标题
  title?: string; //标题
  orderData?: Array<OrderData>; //订单数据
  activeName?: number; //点击的栏目
  column?: Array<Column>; //栏目状态
}

interface ColumnShow extends Column {
  navIndex?: number;
}

const props = withDefaults(defineProps<Props>(), {
  platformCustomer: () => [],
  showTitle: false,
  title: "订单管理",
  orderData: () => [],
  column: () => defaultData,
  activeName: 0,
});

const activeName = ref<number>(props.activeName);

watch(
  () => props.activeName,
  (newValue) => {
    activeName.value = newValue;
  }
);

const emits = defineEmits<{
  (event: "activeName:update", value: number): void;
}>();

const columnShow = ref<Array<ColumnShow>>(
  props.column.map((item: ColumnShow): ColumnShow => {
    item.navIndex = 0;
    return item;
  })
);

const navShow = computed((): Array<Navigation> => {
  return columnShow.value[activeName.value].navigation
    ? columnShow.value[activeName.value].navigation
    : [];
});

const clickPart = (index: number) => {
  activeName.value = index;
  emits("activeName:update", index);
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
